import React, { useEffect, useState } from 'react';

import {
    Breadcrumb,
    Card,
    Form,
    Input,
    Select,
    Button,
    DatePicker,
} from 'antd';

import { MergeRouteComponentProps } from '../../../../router/types';

import { fetchTypeList as fetchExamTypeList } from '../../../../http/exam';
import { fetchList as fetchSubjectList } from '../../../../http/subject';
import {
    addItem,
    fetchTypeList as fetchQuestionTypeList,
} from '../../../../http/question';

interface IProps extends MergeRouteComponentProps {}

const ExamAdd: React.FC<IProps> = () => {
    /**
     * 考试类型列表
     */
    const [examTypeList, setExamTypeList] = useState([]);

    /**
     * 课程
     */
    const [subjectList, setSubjectList] = useState([]);

    /**
     * 表单数据
     */
    const [form, setForm] = useState({
        name: '',
        etid: '',
        sid: '',
        num: '',
        start: '',
        end: '',
    });

    /**
     * 副作用
     */
    useEffect(() => {
        getExamTypeList();
        getSubjectList();
    }, []);

    /**
     * 请求数据：考试类型列表
     */
    const getExamTypeList = async () => {
        const res = await fetchExamTypeList();
        setExamTypeList(res.data.data);
    };

    /**
     * 获取课程
     */
    const getSubjectList = async () => {
        const res = await fetchSubjectList();
        setSubjectList(res.data.data);
    };

    /**
     * 添加试卷
     */
    const onAddClicked = async () => {
        console.log('form', form);
    };

    return (
        <div className="exam-add">
            {/* 面包屑导航 */}
            <Breadcrumb>
                <Breadcrumb.Item>
                    <a href="">首页</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">考试管理</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">添加考试</a>
                </Breadcrumb.Item>
            </Breadcrumb>

            {/* 卡片视图 */}
            <Card>
                <Form layout="vertical">
                    <Form.Item
                        label="试卷名称"
                        name="name"
                        rules={[{ required: true, message: '请输入试卷名称' }]}
                    >
                        <Input
                            placeholder="请输入考试名称"
                            onChange={(e) =>
                                setForm({ ...form, name: e.target.value })
                            }
                        />
                    </Form.Item>

                    <Form.Item
                        label="选择考试类型"
                        name="etid"
                        rules={[{ required: true, message: '请选择考试类型' }]}
                    >
                        <Select
                            className="block"
                            placeholder="请选择考试类型"
                            onChange={(v: string) =>
                                setForm({ ...form, etid: v })
                            }
                        >
                            {examTypeList.map((item: any) => (
                                <Select.Option key={item.id} value={item.id}>
                                    {item.name}
                                </Select.Option>
                            ))}
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="选择课程"
                        name="sid"
                        rules={[{ required: true, message: '请选择课程' }]}
                    >
                        <Select
                            className="block"
                            placeholder="请选择课程"
                            onChange={(v: string) =>
                                setForm({ ...form, sid: v })
                            }
                        >
                            {subjectList.map((item: any) => (
                                <Select.Option key={item.id} value={item.id}>
                                    {item.name}
                                </Select.Option>
                            ))}
                        </Select>
                    </Form.Item>

                    <Form.Item
                        label="设置题量"
                        name="num"
                        rules={[{ required: true, message: '请设置题量' }]}
                    >
                        <Input
                            placeholder="请设置题量"
                            onChange={(v) =>
                                setForm({ ...form, num: v.target.value })
                            }
                        />
                    </Form.Item>

                    <Form.Item
                        label="考试时间"
                        name="time"
                        rules={[{ required: true, message: '请设置题量' }]}
                    >
                        <DatePicker.RangePicker
                            className="block"
                            format="YYYY-MM-DD hh:mm:ss"
                            onChange={(momentArr, dateStrArr) => {
                                setForm({
                                    ...form,
                                    start: String(Date.parse(dateStrArr[0])),
                                    end: String(Date.parse(dateStrArr[1])),
                                });
                            }}
                        />
                    </Form.Item>
                </Form>

                <Button type="primary" onClick={onAddClicked}>
                    创建试卷
                </Button>
            </Card>
        </div>
    );
};

export default ExamAdd;
